<template>
	<view class="page">
		<view class="content">
			
			<!-- 页面顶部标题 -->
			<view class="title">
				{{title}}
			</view>
			
			<!-- 截图轮播 -->
			<swiper class="swiper" :autoplay="true" :interval="5000" :duration="800" circular>
				<swiper-item v-for="(item,index) of imgSrc" :key="index">
					<view class="swiper-item">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="download">
			
			<!-- 下载按钮 -->
			<view class="button" @click="download">
				{{osName}}下载
			</view>
			
			<!-- logo 标题 简述 -->
			<view class="info">
				<image class="logo" :src="logoSrc" mode="aspectFill"></image>
				<view class="name">
					<view>
						{{name}}
					</view>
					<view>
						{{des}}
					</view>
				</view>
			</view>
			
			<!-- 版本号 -->
			<view class="version" v-if="version">
				{{version}}
			</view>
		</view>
		
		<!-- 微信内置浏览器提示 -->
		<view class="wxTip" v-if="wxTipShow">
			<image src="../../static/wx.png" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				// ⬇⬇⬇⬇⬇⬇对以下变量重新配置⬇⬇⬇⬇⬇⬇
				
				name: "Hello uni-app",					// app名称
				des: "uni-app 演示项目",					// app简述
				title: "跨平台应用开发引擎",				// 顶部标题
				
				logoSrc: "../../static/logo.png",		// logo地址
				
				bg: "url(https://picsum.photos/375/800)",			
														// 背景 背景色 或背景图片(网络地址) 示例⬇
														// #7236FF
														// linear-gradient(45deg,#00aaff 0%,#7236FF 100%)
														// url(https://picsum.photos/200/300)
														// 如需本地背景图片,请在CSS内改写,以规避发行后背景图不显示的问题
				bgVague: "blur(30px)",					// 背景毛玻璃效果 0px则不开启
				
				imgSrc: ["../../static/image1.jpg","../../static/image2.jpg","../../static/image3.jpg"],		// 截图地址
				swiperTime: 4000,						// 截图自动轮播时间 毫秒
				
				// ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆
				
				
				// ⬇⬇⬇⬇⬇⬇在getVersion方法内赋值⬇⬇⬇⬇⬇⬇
				
				apkSrc: "",			// 安卓安装包地址 网络地址
				ipaSrc: "",			// 苹果 App Store 应用id
				hapSrc: "",			// 鸿蒙原生 应用id
				version: "", 		// 版本号
				
				// ⬆⬆⬆⬆⬆⬆⬆⬆⬆⬆
				
				
				
				osName: '', 		// 平台
				isWx: false, 		// 是否微信打开
				wxTipShow: false, 	// 提示浏览器打开状态
				contentHight: "0px" // content高度
			}
		},
		onLoad() {
			// 写入页面标题
			uni.setNavigationBarTitle({
				title: this.name
			})
			// 获取系统信息
			this.getPlatform()
			
			// 获取最新版本信息
			this.getVersion()
		},
		methods: {
			getPlatform() {
				// 用定时器解决某些浏览器一开始加载时获取windowHeight不准确的问题
				uni.showLoading({
					title:"Loading..."
				})
				setTimeout(()=>{
					uni.getSystemInfo({
						success:(res)=>{
							
							this.contentHight = (res.windowHeight-180)+'px'
							
							let ua = res.ua
							
							let isAndroid = /(Android|Adr)/.test(ua) //android终端
							let isIos = /(iPhone|iPad|iPod|iOS|ios)/.test(ua) //ios终端
							let isHarmony = /(Harmony)/.test(ua) //Harmony os终端
							this.isWx = /(Weixin|WeiXin|WeChat|MicroMessenger)/.test(ua) //微信内置浏览器
							
							if (isAndroid) {
								this.osName = 'Android'
							} else if (isIos) {
								this.osName = 'ios'
							} else if (isHarmony) {
								this.osName = 'HarmonyOS'
							} else {
								this.osName = 'Android'
							}
							
						},
						complete: () => {
							uni.hideLoading()
						}
					})
				},100)
			},
			getVersion(){
				// 如有需要配合后台管理系统一起使用的话,
				// 你可以在此处编入对应代码
				
				// request...
				
				// 获取应用的最新版本信息和下载链接
				// 对apkSrc ipaSrc hapSrc version重新赋值
				
				this.apkSrc = "https://sj.qq.com/appdetail/io.dcloud.hellouniapp"
				this.ipaSrc = "1417078253"
				this.hapSrc = "io.dcloud.hellouniapp.h"
				this.version = ""
				
			},
			download() {
				if (this.isWx) {
					this.wxTipShow = true
				} else if (this.osName == 'Android') {
					if (this.apkSrc) {
						window.location.href = this.apkSrc
					} else {
						this.toast()
					}
				} else if (this.osName == 'ios') {
					if (this.ipaSrc) {
						window.location.href = `https://apps.apple.com/cn/app/${this.ipaSrc}`
					} else {
						this.toast()
					}
				} else if (this.osName == 'HarmonyOS') {
					if (this.hapSrc) {
						window.location.href = `https://appgallery.huawei.com/app/detail?id=${this.hapSrc}`
					} else {
						this.toast()
					}
				}
			},
			toast(){
				uni.showToast({
					title: `暂未配置${this.osName}下载地址`,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		background: v-bind(bg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		.content {
			height: v-bind(contentHight);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			backdrop-filter: v-bind(bgVague);
			
			.title {
				margin-bottom: 100rpx;
				line-height: 1;
				color: #fff;
				font-size: 40rpx;
				font-weight: 700;
				letter-spacing: 4rpx;
				text-shadow: 2rpx 2rpx 4rpx #dfdade;
			}
			.swiper{
				width: 300rpx;
				height: 660rpx;
				border-radius: 30rpx;
				overflow: hidden;
				border: 10rpx solid rgba(255, 255, 255, .5);
				.swiper-item{
					
					image{
						width: 300rpx;
						height: 660rpx;
						vertical-align: middle;
					}
				}
			}
		}

		.download {
			
			width: 100vw;
			height: 180px;
			
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			
			position: fixed;
			left: 0;
			bottom: 0;

			.button {
				width: 480rpx;
				line-height: 88rpx;
				border-radius: 48rpx;
				border: 1rpx solid #2f2f2f;
				text-align: center;
				font-size: 30rpx;
				font-weight: 700;
				color: #262626;
				margin-bottom: 50rpx;
			}

			.button:active {
				transform: scale(1.008);
				opacity: 0.9;
			}
			
			.info {
				display: flex;
				align-items: center;
			
				.logo {
					width: 100rpx;
					height: 100rpx;
					vertical-align: middle;
					margin-right: 20rpx;
				}
			
				.name {
					view {
						color: #262626;
						text-shadow: 2rpx 2rpx 4rpx #dfdade;
					}
			
					view:nth-child(1) {
						font-size: 32rpx;
						font-weight: 700;
						margin-bottom: 6rpx;
					}
			
					view:nth-child(2) {
						font-size: 26rpx;
					}
				}
				
			}
			.version{
				position: absolute;
				left: 50%;
				bottom: 20rpx;
				color: #ccc;
				font-size: 20rpx;
				transform: translateX(-50%);
			}
		}


		.wxTip {
			width: 100vw;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 999;
			background-color: rgba(0, 0, 0, .5);

			image {
				width: 720rpx;
				height: 420rpx;
				margin-top: 100rpx;
			}
		}
	}
</style>